<template>
  <div class="video_create">
    <van-nav-bar
      title="快乐分享，轻松把控"
      left-text=""
      fixed
      placeholder
      left-arrow
      @click-left="$router.back()"
    ></van-nav-bar>

    <!-- 分享显示设置 -->
    <div class="reveal">
      <div class="reveal_content">
        <h3>更改标题</h3>
        <div class="describe">
          <textarea
            placeholder="请输入分享文章标题64字以内"
            v-model="share.title"
            maxlength="64"
            rows="2"
          ></textarea>
        </div>
        <h3>更改描述</h3>

        <div class="describe">
          <textarea
            placeholder="请输入分享文章描述120字以内"
            v-model="share.describes"
            maxlength="120"
            rows="4"
          ></textarea>
        </div>
        <h3>更改封面图</h3>
        <div class="up">
          <!-- 封面上传 -->
          <div class="uploading" v-show="!imgShow">
            <div
              :class="{
                active: fileList.lenght == 0 ? true : false,
                u_img: true,
              }"
            >
              <van-uploader
                accept="image/*"
                v-model="fileList"
                :before-delete="getDelImg"
                :after-read="afterRead"
                multiple
                max-count="1"
              >
                <div class="poster_tips">
                  <img src="@a/images/video/video_add_icon.png" alt="" />
                </div>
              </van-uploader>
            </div>
          </div>

          <div class="img_Show" v-if="imgShow">
            <div class="close">
              <van-icon name="cross" @click="imgCloseClick" />
            </div>
            <!-- <img
              src="../../assets/images/article/guanb.png"
              alt=""
              @click="imgCloseClick"
            /> -->
            <div class="imgShow">
              <img :src="fileList[0].url" alt="" />
            </div>
          </div>
        </div>
        <h3>分享效果</h3>
        <div class="det">
          <!-- <img src="../../assets/share_det.png" alt="" /> -->
          <div class="main">
            <h2>{{ share.title }}</h2>
            <div class="content">
              <div class="left">{{ share.describes }}</div>
              <div class="right">
                <img v-if="imgShow" :src="fileList[0].url" alt="" />
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="share" @click="getShareSubmit">分享</div>

    <!-- vant 代码 -->

    <WxShare :wxShareObj="wxShareObj"></WxShare>
  </div>
</template>

<script>
import WxShare from "@c/wx_share";

import sdk from "../../plugins/wxshare";
export default {
  name: "video_create",
  data() {
    return {
      // 微信分享
      wxShareObj: {
        showShare: false,
        title: "",
        text: "",
        img: "",
        getShareUrl: "",
        show: false,
        showText: "招聘",
      },

      fileList: [], // 展示上传图片

      // 接口传参数据
      share: {
        content: "", //配文
        title: "", //分享标题
        describes: "", //分享文章描述
        img: "", //封面图片参数上传
        charge: 1, //咨询收费
        shareForm: 0, //是否填写表单
        shareOne: 0, //显示名片
        id: "",
        openId: "",
        userId: "",
        type:15,
      },
      shareFlag: true, //防止继续点击,
      // shareId: "", //分享时 使用id 放在重复点击生成新id
      articleShareId: "", //表单id
      imgShow: false, //封面图片展示
      agentId: "",
    };
  },
  created() {
    //获取报名表单数据
    // this.gettingData();
  },
  mounted() {
    this.$nextTick(function () {
      //通知栏字体颜色
      this.$publicObj.getSizeColor("h");
    });
    document.getElementById("app").style.backgroundColor = "#ffffff";
    document.body.style.backgroundColor = "#ffffff";

    this.share.title = sessionStorage.getItem("title");
    this.share.describes = sessionStorage.getItem("description");

    if (sessionStorage.getItem("article_img")) {
      this.imgShow = true;
      this.share.img = this.$publicObj.urlImg(
        sessionStorage.getItem("article_img")
      );
    }
    this.fileList.push({ url: this.share.img });
    // JSON.parse(localStorage.getItem("userWxData")).openid;
    this.share.id = this.$route.query.tableId;

    this.share.openId = JSON.parse(sessionStorage.getItem("userWxData")).openid;

    this.share.agentId = sessionStorage.getItem("agentId");
    this.share.userId = this.$route.query.userId;
  },
  methods: {
    getShareSubmit() {
      //分享提交
      this.$publicObj.getLoading(); //加载动画
      if (this.share.title == "") {
        this.$toast("请输入招聘标题");
        return false;
      }
      if (this.share.describes == "") {
        this.$toast("请输入招聘描述");
        return false;
      }
      if (this.share.img == "") {
        this.$toast("请上传图片");
        return false;
      }
      this.$api.getShareInviteSaveShare(this.share).then((res) => {
          if (res.code == 0) {
            this.$publicObj.closeLoading(); //加载动画

            if (this.shareFlag) {
              //只请求一次
              this.shareFlag = false; //节流

              this.shareClick(res.posterShareId); // 保存后 分享链接时调用
            }
          }
        })
        .catch((err) => {
          console.log(err);
          this.$publicObj.closeLoading(); //加载动画
          this.$toast("出错了 联系管理员");
        });
    },
    // 保存后 分享链接时调用
    shareClick(id) {
      let objData = {
        tableId: this.$route.query.id,
        applyForm: id,
        cover: this.share.img,
        title: this.share.title,
        agentId: this.share.agentId, //this.$route.query.userId
        openId: this.share.openId,
        userId: this.share.userId,
        tableType: 15,
      };

      this.$api.getShare(objData).then((res) => {
        if (res.code !== 0) return this.$toast(res.msg);
        //在移动端内
        this.wxShareObj.show = true;

        this.wxShareObj.showShare = false;
        this.wxShareObj.title = this.share.title;
        this.wxShareObj.text = this.share.describes;
        this.wxShareObj.img = this.share.img;
        this.wxShareObj.getShareUrl = `/details?id=${res.id}&userId=${this.share.userId}&tableId=${this.$route.query.id}&shareId=${this.$route.query.userId}&account=${this.share.agentId}`;
        sdk.getJSSDK(this.wxShareObj);
      });
    },
    //清除展示图片
    imgCloseClick() {
      this.fileList = [];
      this.share.img = "";
      this.imgShow = false;
      document.querySelector(".u_img").style.border =
        "0.149333rem dashed rgba(153, 153, 153)";
    },
    //上传图片
    afterRead(file) {
      let _this = this;
      let files = file.file;
      //判断是否为图片文件
      if (files.type.indexOf("image") == -1) {
        this.$toast("请上传图片文件");
      } else {
        this.$publicObj.getLoading();
        _this.$publicObj.uploadFile(
          files,
          function (imgData) {
            document.querySelector(".u_img").style.border = "none";

            _this.share.img = imgData;

            _this.$toast("上传成功");
            _this.$publicObj.closeLoading();
          },
          "/sys/oss/upload"
        );
      }
    },
    //删除图片
    getDelImg(elIndex) {
      let _this = this;
      document.querySelector(".u_img").style.border =
        "0.149333rem dashed rgba(153, 153, 153)";

      return (file, name) => {
        let fileIndex = name.index;
        _this.fileList[elIndex].splice(fileIndex, 1);
        _this.share.img = "";
      };
    },
  },
  computed: {},
  components: {
    WxShare,
  },
};
</script>

<style lang="less" scoped>
//h3 样式
h3 {
  font-size: 14px;
  font-weight: 700;
  color: #333333;
  margin-bottom: 10px;
  margin-top: 20px;
}
//公共的输入框样式
.textarea-style {
  resize: none;
  background: #f3f5f7;
  padding: 5px 12px;
  border: none;
  font-size: 14px;
  border-radius: 4.999992px;
}

// 分享显示设置
.reveal {
  padding: 0 15px 15px;

  .reveal_content {
    padding: 0 10.000008px;
  }
  & textarea {
    width: 100%;
    .textarea-style();
  }
  .describe {
    display: flex;
    align-items: center;
    margin-bottom: 5px;
    textarea {
      width: 100%;

      .textarea-style();

      font-size: 12px !important;
    }
  }
  .up {
    .uploading {
      width: 88px;
      height: 88px;
      position: relative;
      background-color: #fff;
    }
    //封面
    .u_img {
      width: 88px;
      height: 88px;
      box-sizing: border-box;
      margin-top: 4.000008px;
      .van_img {
        width: 88px;
        height: 88px;
        border: 0;
      }
      .poster_tips {
        width: 88px;
        height: 88px;
        display: -webkit-flex;
        display: flex;
        justify-content: center;
        align-items: center;
        img {
          width: 50%;
          height: 50%;
        }
      }
      /deep/ .van-uploader {
        .van-uploader__preview-delete {
          width: 11.71875px;
          height: 11.71875px;
          i {
            font-size: 11.71875px;
            top: -0.585938px;
            left: -0.585938px;
          }
        }
      }
    }
    .active {
      border: 3.499992px dashed rgba(153, 153, 153);
      margin-top: 0;
    }
    .img_Show {
      position: relative;
      width: 88px;
      height: 88px;

      .close {
        position: absolute;
        width: 12px;
        height: 12px;
        right: 1px;
        color: #fff;
        background-color: #000;
        border-bottom-left-radius: 10px;
        font-size: 8px;
        display: flex;
        justify-content: center;
        align-items: center;
      }
      .imgShow {
        display: flex;
        align-items: center;
        width: 88px;
        height: 88px;
        overflow: hidden;
        img {
          width: 100%;
          height: 100%;
        }
      }
    }
  }
  .det {
    padding: 0 20px;
    .main {
      padding: 15px;
      box-shadow: 1px 1px 3px 1px rgba(0, 0, 0, 0.15);
      .content {
        display: flex;
        margin-top: 10px;
        justify-content: space-between;
        .left {
          width: 160px;
          height: 70px;
          font-size: 16px;
          color: #ccc;

          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 3;
          -webkit-box-orient: vertical;
        }
        .right {
          margin-left: 5px;
          display: flex;
          justify-content: center;
          align-items: center;
          img {
            width: 70px;
            height: 70px;
            border-radius: 15px;
          }
        }
      }
    }
  }
}
.van-uploader__preview-image {
  width: 64.999992px;
  height: 64.999992px;
}
// 分享按钮
.share {
  width: 80%;
  height: 40px;
  margin: 25px auto 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  color: #fff;
  background: #b81c25;
  border-radius: 20px;
}
</style>